<template>
	<view class="trade-inner" @click="closeBox">
		<view class="tab">
			<view class="buy uni-bg-up" :class="openStatus == 2 ? 'normal' : ''" @click="onChangeType(1)">买入</view>
			<view class="sell uni-bg-down " :class="openStatus == 1 ? 'normal' : ''" @click="onChangeType(2)">卖出</view>
			<!-- <view class="parallelogram"></view> -->
		</view>
		<view>
			<view class="select-group uni-row">
				<view class="select-input uni-row" @click="showBox" @click.stop="showBox" @tap.stop="showBox">
					<view style="flex: 3;">
						<view class="strate-current" v-for="(item,index) in localContractStrategy" :key="index" v-if="item.active">{{item.name}}</view>
						<view class="select-box uni-column" v-show="isShowBox==1">
							<view :class="item.active ? 'select-item-active':'select-item'" v-for="(item,index) in localContractStrategy"
							 :key="index" @click="changeStratege(item.id)">{{item.name}}</view>
						</view>
					</view>
					<span style="flex: 1;" class="input-button">Ⅴ</span>
				</view>
			</view>
			<view class="flex-row uni-flex igroup">
				<span style="flex: 2;" class="iholder">价格</span>
				<view style="flex: 3;">
					<input v-model="para.price" class="iinput" type="digit" />
				</view>
				<span style="flex: 1;" class="iunit">USD</span>
			</view>			
			<view class="flex-row uni-flex igroup">
				<span style="flex: 2;" class="iholder">数量</span>
				<view style="flex: 3;">
					<input v-model="para.size" class="iinput" type="digit" />
				</view>
				<span style="flex: 1;" class="iunit"></span>
			</view>
			<view class="uni-row button-group" v-if="mountRangeGroup!=null">
				<view :class="item.active?mountRangeGroup.active:mountRangeGroup.inactive" @click="setMountRange(index,item.value)"
				 v-for="(item,index) in mountRangeGroup.btns" :key="index">{{item.name}}</view>
			</view>
			<view style="margin-top:5px" v-if="balance!=null">
				<view class="contract-btn" v-if="openStatus==1">
					<view class="uni-h7 uni-text-gray">可用 {{balance.quoteBalance}}</view>
					<view class="uni-h7 uni-text-gray">可买 {{balance.quoteCanBuy}}</view>
				</view>
				<view class="contract-btn" v-else>
					<view class="uni-h7 uni-text-gray">可用 {{balance.baseBalance}}</view>
					<view class="uni-h7 uni-text-gray">可卖 {{balance.baseCanSell}}</view>
				</view>
			</view>
			<button class="btn uni-bg-up" style="margin-top: 5px;" @tap="contracAction('buy')" v-if="openStatus==1">买入{{instrument.base_currency}}</button>
			<button class="btn uni-bg-down" style="margin-top: 5px;" @tap="contracAction('sell')" v-else>卖出{{instrument.base_currency}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				instrument: null,
				balance: null,
				openStatus: this.type,
				isShowBox: 0,
				ticker: null,
				para: {
					size: '',
					order_type: '0',
					instrument_id: '',
					type: 'limit',
					price: '',
					notional: '',
					side: ''
				},
				mountRangeGroup: null,
				localContractStrategy: []
			}
		},
		mounted() {
			this.mountRangeGroup = this._MountRangeGroup
			this.localContractStrategy = this.SpotStrategy
			this.fresh()
			uni.$on("spotMartinFresh", this.fresh)
		},
		methods: {
			showBox() {
				console.log("show box")
				if (this.isShowBox == 0) {
					this.isShowBox = 1
				} else {
					this.isShowBox = 0
				}

			},
			closeBox() {
				console.log("close box")
				this.isShowBox = 0
			},
			contracAction(side) {
				// 1:开多				2:开空				3:平多				4:平空	
				if (this.para.instrument_id == '') {
					this.setInstrument()
				}
				console.log("contract action")
				console.log(this.para)

				this.para.side = side
				if (this.assertNotEmpty(this.para.instrument_id, "币对标识为空") &&
					this.assertBigThanZero(this.para.price, "价格设置不合理") &&
					this.assertBigThanZero(this.para.size, "购买数量要大于0")) {
					uni.request({
						url: this.api + '/apis/okex/authed?simpleUrl=/api/spot/v3/orders',
						method: 'POST',
						data: this.para,
						header: {
							"Authorization": "Bearer " + this.getToken()
						},
						success: res => {
							this.cleanPara()
							uni.$emit("orderFresh")
						}
					});
				}
			},
			setMountRange(index, rate) {
				this.changeGroup(index, this.mountRangeGroup)
				if (this.hasActive(this.mountRangeGroup)) {
					console.log("set moutn range " + this.type + "   " + this.openStatus)
					if (this.openStatus == "1") { // 买
						this.para.size = Math.floor(this.balance.quoteCanBuy * rate / 100)
					} else { // 卖
						this.para.size = Math.floor(this.balance.baseBalance * rate / 100)
					}
				} else {
					this.para.size = ''
				}
			},
			onChangeType(e) {
				this.cleanPara()
				this.openStatus = e;
			},
			cleanPara() {
				this.para = {
					size: '',
					order_type: '0',
					instrument_id: '',
					type: 'limit',
					price: '',
					notional: '',
					side: ''
				}
				this.cleanGroup(this.mountRangeGroup)
			},
			setInstrument() {
				this.instrument = this.getDefaultSpot()
				this.para.instrument_id = this.instrument.instrumentId
			},
			getBalance() {
				uni.request({
					url: this.api + '/spots/spot/' + this.instrument.instrumentId,
					method: 'GET',
					header: {
						"Authorization": "Bearer " + this.getToken()
					},
					success: res => {
						console.log('getBalance Base Resp:')
						console.log(res.data.data)
						this.balance = res.data.data
					}
				});
			},
			changeStratege(e) {
				for (var i = 0; i < this.SpotStrategy.length; i++) {
					if (e == this.SpotStrategy[i].id) {
						this.SpotStrategy[i].active = true
					} else {
						this.SpotStrategy[i].active = false
					}
				}
				this.$emit("changeStrategy", {
					index: e
				})

			},
			fresh: function() {
				console.log("fresh balance leverage contract")
				this.setInstrument()
				this.getBalance()
				this.getTicker()
			},
			getTicker() {
				uni.request({
					url: this.api + '/apis/okex/unauth?simpleUrl=/api/spot/v3/instruments/' + this.instrument.instrumentId +
						'/ticker',
					method: 'GET',
					success: res => {
						console.log('getTicker resps:')
						console.log(res.data.data)
						this.ticker = res.data.data
					}
				});
			}
		}
	}
</script>

<style>
	.trade-inner .tab {
		position: relative;
		display: flex;
		text-align: center;
	}

	.igroup {
		border: 1px solid #E4E3E3;
		height: 58upx;
		align-items: center;
		margin-top: 15upx;
		padding-left: 10upx;
		padding-right: 10upx;
	}
	

	.igroup span {
		display: inline-flex;
		align-items: center;
		font-size: 0.8em;
	}

	.iinput {
		text-align: right;
		padding-right: 20upx;
	}

	.iholder {
		color: #A6A4A4;
	}

	.iunit {
		color: #A6A4A4;
	}

	.place {
		text-align: left;
	}

	.trade-inner .tab .buy {
		color: #ffffff;
		font-weight: bold;
		width: 50%;
		height: 50upx;
		line-height: 50upx;
	}

	.trade-inner .tab .sell {
		color: #ffffff;
		font-weight: bold;
		width: 50%;
		height: 50upx;
		line-height: 50upx;
	}

	.trade-inner .tab .normal {
		background: #ECECF6;
		color: #555555;
		font-weight: bold;
	}

	.trade-inner .tab .parallelogram {
		position: absolute;
		left: calc(50% - 19upx);
		top: 0;
		transform: translate(-50%, -50%);
		width: 36upx;
		height: 74upx;
		background: #ffffff;
		-webkit-transform: skew(-30deg);
		-moz-transform: skew(-30deg);
		-o-transform: skew(-30deg);
		transform: skew(-30deg);
	}

	.trade-inner .price-input {
		position: relative;
		margin-top: 30upx;
	}

	.trade-inner .price-input input {
		position: relative;
		padding-right: 180upx;
	}

	.trade-inner .price-input .opt {
		display: flex;
		position: absolute;
		top: 2upx;
		right: 0;
		width: 180upx;
		height: 78upx;
		line-height: 78upx;
	}

	.trade-inner .num-input {
		position: relative;
		margin-top: 30upx;
	}

	.trade-inner .price-input .opt .button {
		border: 0;
		background: #fff;
		width: 80upx;
		height: 78upx;
		line-height: 78upx;
		text-align: center;
		font-size: 48upx;
		font-weight: 400;
	}

	.trade-inner .btn {
		height: 74upx;
		line-height: 74upx;
		color: #fff;
		font-size: 28upx;
		font-weight: bold;
		margin-top: 30upx;
	}

	.contract-btn {
		display: flex;
		flex-direction: row;
	}

	.contract-btn view {
		flex: 1;
	}

	.tab-leverr {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 42upx;
	}

	.tab-leverr .lever-box {
		display: flex;
		flex-direction: row;
		border: #E1DDDD 1px solid;
		width: 48%;
	}

	.lever-box view {
		flex: 1;
		padding-left: 10px;
		color: #A6A4A4;
	}

	.lever-box view:last-child {
		text-align: right;
		padding-right: 10px;
	}
</style>
